<template>
    <div class="question">
        <div class="title">
            <span class="bord"></span>
            <span class="word">代理人信息</span>
        </div>
        <div class="list">
            <ul class="top clearfix">
                <p class="titl">{{question.one.question}}</p>
                <!-- <p class="titl">1、你的性别是？</p> -->
                <!-- <input type="text" class="titl" value="1、你的性别是？" placeholder="1、你的性别是？" v-model="question.one.question"> -->
                <li class="fl">
                    <input type="radio" name="sex" id="sex1" class="" value="男" v-model="question.one.answer">
                    <label class="pops" for="sex1">男</label>
                </li>
                <li class="fl">
                    <input type="radio" name="sex" id="sex2" class="" value="女" v-model="question.one.answer">
                    <label class="pops" for="sex2">女</label>
                </li>
            </ul>
            <ul class="top clearfix">
                <p class="titl">{{question.two.question}}</p>
                <!-- <p class="titl">2、你的年龄是？</p> -->
                <!-- <input type="text" class="titl" value="2、你的年龄是？" placeholder="2、你的年龄是？"> -->
                <li class="fl">
                    <input type="radio" name="age" id="age1" class="" value="18岁-25岁" v-model="question.two.answer">
                    <label class="pops" for="age1">18岁-25岁</label>
                </li>
                <li class="fl">
                    <input type="radio" name="age" id="age2" class="" value="25岁-35岁" v-model="question.two.answer">
                    <label class="pops" for="age2">25岁-35岁</label>
                </li>
                <li class="fl">
                    <input type="radio" name="age" id="age3" class="" value="35岁-45岁" v-model="question.two.answer">
                    <label class="pops" for="age3">35岁-45岁</label>
                </li>
                <li class="fl">
                    <input type="radio" name="age" id="age4" class="" value="45岁-55岁" v-model="question.two.answer">
                    <label class="pops" for="age4">45岁-55岁</label>
                </li>
                <li class="fl">
                    <input type="radio" name="age" id="age5" class="" value="45岁-60岁" v-model="question.two.answer">
                    <label class="pops" for="age5">45岁-60岁</label>
                </li>
                <li class="fl">
                    <input type="radio" name="age" id="age6" class="" value="60岁以上" v-model="question.two.answer">
                    <label class="pops" for="age6">60岁以上</label>
                </li>

            </ul>

            <ul class="top clearfix">
                <p class="titl">{{question.three.question}}</p>
                <!-- <p class="titl">3、你的职业是？</p> -->
                <!-- <input type="text" class="titl" value="3、你的职业是？" placeholder="3、你的职业是？"> -->
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp1" class="" value="普通员工" v-model="question.three.answer">
                    <label class="pops" for="ocp1">普通员工</label>
                </li>
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp2" class="" value="经营者" v-model="question.three.answer">
                    <label class="pops" for="ocp2">经营者</label>
                </li>
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp3" class="" value="销售人员" v-model="question.three.answer">
                    <label class="pops" for="ocp3">销售人员</label>
                </li>
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp4" class="" value="公务员" v-model="question.three.answer">
                    <label class="pops" for="ocp4">公务员</label>
                </li>
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp5" class="" value="教师" v-model="question.three.answer">
                    <label class="pops" for="ocp5">教师</label>
                </li>
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp6" class="" value="医生" v-model="question.three.answer">
                    <label class="pops" for="ocp6">医生</label>
                </li>
                <li class="fl">
                    <input type="radio" name="ocp" id="ocp7" class="" value="其他" v-model="question.three.answer">
                    <label class="pops" for="ocp7">其他 </label>
                </li>
            </ul>
            <ul class="top clearfix">
                <p class="titl">{{question.four.question}}</p>
                <!-- <p class="titl">4、您从事该工作的年限是？</p> -->
                <!-- <input type="text" class="titl" value="4、您从事该工作的年限是？" placeholder="4、您从事该工作的年限是？"> -->
                <li class="fl">
                    <input type="radio" name="year" id="year1" class="" value="1年以内" v-model="question.four.answer">
                    <label class="pops" for="year1">1年以内</label>
                </li>
                <li class="fl">
                    <input type="radio" name="year" id="year2" class="" value="1-5年" v-model="question.four.answer">
                    <label class="pops" for="year2">1-5年</label>
                </li>
                <li class="fl">
                    <input type="radio" name="year" id="year3" class="" value="5-10年" v-model="question.four.answer">
                    <label class="pops" for="year3">5-10年</label>
                </li>
                <li class="fl">
                    <input type="radio" name="year" id="year4" class="" value="10年以上" v-model="question.four.answer">
                    <label class="pops" for="year4">10年以上</label>
                </li>

            </ul>
            <ul class="top clearfix">
                <p class="titl">{{question.five.question}}</p>
                <!-- <p class="titl">5、您的好友数量大概有多少？</p> -->
                <!-- <input type="text" class="titl" value="5、您的好友数量大概有多少？" placeholder="5、您的好友数量大概有多少？"> -->
                <li class="fl">
                    <input type="radio" name="nube" id="nube1" class="" value="100以下" v-model="question.five.answer">
                    <label class="pops" for="nube1">100以下</label>
                </li>
                <li class="fl">
                    <input type="radio" name="nube" id="nube2" class="" value="100-500" v-model="question.five.answer">
                    <label class="pops" for="nube2">100-500</label>
                </li>
                <li class="fl">
                    <input type="radio" name="nube" id="nube3" class="" value="501-2000" v-model="question.five.answer">
                    <label class="pops" for="nube3">501-2000</label>
                </li>
                <li class="fl">
                    <input type="radio" name="nube" id="nube4" class="" value="2000以上" v-model="question.five.answer">
                    <label class="pops" for="nube4">2000以上</label>
                </li>

            </ul>
            <ul class="tab">
                <p class="titl">{{question.six.question}}</p>
                <!-- <p class="titl">6、您平常会选择在网络上购买东西吗？</p> -->
                <!-- <input type="text" class="titl" value="6、您平常会选择在网络上购买东西吗？" placeholder="6、您平常会选择在网络上购买东西吗？"> -->
                <li class="">
                    <input type="radio" name="shop" id="shop1" class="" value="经常在网上购物 " v-model="question.six.answer">
                    <label class="pops" for="shop1">经常在网上购物</label>
                </li>
                <li class="">
                    <input type="radio" name="shop" id="shop2" class="" value="偶尔，只有看到特别喜欢的东西才会在网上购买 " v-model="question.six.answer">
                    <label class="pops" for="shop2">偶尔，只有看到特别喜欢的东西才会在网上购买</label>
                </li>
                <li class="">
                    <input type="radio" name="shop" id="shop3" class="" value="几乎不网购，更喜欢到线下超市购物" v-model="question.six.answer">
                    <label class="pops" for="shop3">几乎不网购，更喜欢到线下超市购物</label>
                </li>
                <li class="">
                    <input type="radio" name="shop" id="shop4" class="" value="其他" v-model="question.six.answer">
                    <label class="pops" for="shop4">其他</label>
                </li>
            </ul>
            <ul class="tab">
                <p class="titl">{{question.seven.question}}</p>
                <!-- <p class="titl">7、您平时网购的频率是？</p> -->
                <!-- <input type="text" class="titl" value="7、您平时网购的频率是？" placeholder="7、您平时网购的频率是？"> -->
                <li class="">
                    <input type="radio" name="freq" id="freq1" class="" value="每周1次" v-model="question.seven.answer">
                    <label class="pops" for="freq1">每周1次</label>
                </li>
                <li class="">
                    <input type="radio" name="freq" id="freq2" class="" value="每周2-6次" v-model="question.seven.answer">
                    <label class="pops" for="freq2">每周2-6次</label>
                </li>
                <li class="">
                    <input type="radio" name="freq" id="freq3" class="" value="每月1-3次" v-model="question.seven.answer">
                    <label class="pops" for="freq3">每月1-3次</label>
                </li>
                <li class="">
                    <input type="radio" name="freq" id="freq4" class="" value="其他" v-model="question.seven.answer">
                    <label class="pops" for="freq4">其他</label>
                </li>

            </ul>
            <ul class="tab">
                <p class="titl">{{question.eight.question}}</p>
                <!-- <p class="titl">8、您平均每个月网购消费多少钱？</p> -->
                <!-- <input type="text" class="titl" value="8、您平均每个月网购消费多少钱？" placeholder="8、您平均每个月网购消费多少钱？"> -->
                <li class="">
                    <input type="radio" name="money" id="money1" class="" value="100元以内" v-model="question.eight.answer">
                    <label class="pops" for="money1">100元以内</label>
                </li>
                <li class="">
                    <input type="radio" name="money" id="money2" class="" value="100-500元" v-model="question.eight.answer">
                    <label class="pops" for="money2">100-500元</label>
                </li>
                <li class="">
                    <input type="radio" name="money" id="money3" class="" value="501-1000元" v-model="question.eight.answer">
                    <label class="pops" for="money3">501-1000元</label>
                </li>
                <li class="">
                    <input type="radio" name="money" id="money4" class="" value="1000元以上" v-model="question.eight.answer">
                    <label class="pops" for="money4">1000元以上</label>
                </li>
            </ul>
            <ul class="tab">
                <p class="titl">{{question.nine.question}}</p>
                <!-- <p class="titl">9、您在网络上主要购买哪些商品？ （多选）</p> -->
                <!-- <input type="text" class="titl" value="9、您在网络上主要购买哪些商品？" placeholder="9、您在网络上主要购买哪些商品？"> -->
                <li class="">
                    <input type="radio" name="typ" id="typ1" class="" value="衣服鞋帽及饰品" v-model="question.nine.answer">
                    <label class="pops" for="typ1">衣服鞋帽及饰品</label>
                </li>
                <li class="">
                    <input type="radio" name="typ" id="typ2" class="" value="日用百货" v-model="question.nine.answer">
                    <label class="pops" for="typ2">日用百货</label>
                </li>
                <li class="">
                    <input type="radio" name="typ" id="typ3" class="" value="食品生鲜" v-model="question.nine.answer">
                    <label class="pops" for="typ3">食品生鲜</label>
                </li>
                <li class="">
                    <input type="radio" name="typ" id="typ4" class="" value="电子产品" v-model="question.nine.answer">
                    <label class="pops" for="typ4">电子产品</label>
                </li>
                <li class="">
                    <input type="radio" name="typ" id="typ5" class="" value="书籍" v-model="question.nine.answer">
                    <label class="pops" for="typ5">书籍</label>
                </li>
                <li class="">
                    <input type="radio" name="typ" id="typ6" class="" value="其他" v-model="question.nine.answer">
                    <label class="pops" for="typ6">其他</label>
                </li>
            </ul>
            <ul class="tab">
                <p class="titl">{{question.ten.question}}</p>
                <!-- <p class="titl">10、如果您网购的商品非常满意，会推荐给朋友或家人吗？</p> -->
                <!-- <input type="text" class="titl" value="10、如果您网购的商品非常满意，会推荐给朋友或家人吗？" placeholder="10、如果您网购的商品非常满意，会推荐给朋友或家人吗？"> -->
                <li class="">
                    <input type="radio" name="rec" id="rec1" class="" value="自己特别喜欢的话会推荐" v-model="question.ten.answer">
                    <label class="pops" for="rec1">自己特别喜欢的话会推荐</label>
                </li>
                <li class="">
                    <input type="radio" name="rec" id="rec2" class="" value="看情况，如果朋友有需要会推荐" v-model="question.ten.answer">
                    <label class="pops" for="rec2">看情况，如果朋友有需要会推荐</label>
                </li>
                <li class="">
                    <input type="radio" name="rec" id="rec3" class="" value="不会，自己喜欢就行，没必要推荐给身边的人" v-model="question.ten.answer">
                    <label class="pops" for="rec3">不会，自己喜欢就行，没必要推荐给身边的人</label>
                </li>
                <li class="">
                    <input type="radio" name="rec" id="rec4" class="" value="其他" v-model="question.ten.answer">
                    <label class="pops" for="rec4">其他</label>
                </li>
            </ul>
            <!-- <ul class="tab">
                <p class="titl">{{question.exeven.question}}</p>
                <textarea name="" class="txt" id="" cols="30" rows="10" v-model="question.exeven.answer"></textarea>
            </ul> -->
        </div>
        <div class="btn" @click="questionNow()">
            下一步
        </div>

    </div>
</template>

<script>
import http from "@/assets/js/axios"
import https from "@/assets/js/axiosh"
import { domain } from '@/assets/js/config'
import { domains } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            isAshow: false,
            isBshow: false,
            userToken: '',
            agentId: '',
            question: {
                one: {
                    question: '1、你的性别是？',
                    answer: ''
                },
                two: {
                    question: '2、你的年龄是？',
                    answer: ''
                },
                three: {
                    question: '3、你的职业是？',
                    answer: ''
                },
                four: {
                    question: '4、您从事该工作的年限是？',
                    answer: ''
                },
                five: {
                    question: '5、您的好友数量大概有多少？',
                    answer: ''
                },
                six: {
                    question: '6、您平常会选择在网络上购买东西吗？',
                    answer: ''
                },
                seven: {
                    question: '7、您平时网购的频率是？',
                    answer: ''
                },
                eight: {
                    question: '8、您平均每个月网购消费多少钱？',
                    answer: ''
                },
                nine: {
                    question: '9、您在网络上主要购买哪些商品？',
                    answer: ''
                },
                ten: {
                    question: '10、如果您网购的商品非常满意，会推荐给朋友或家人吗？',
                    answer: ''
                },
            },
        }
    },
    components: {

    },
    mounted() {

        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        let agentId = sessionStorage.getItem("agentId") || ''
        this.agentId = agentId
        // if (!this.userToken) {
        //     this.$router.push('/index')
        // }
        // this.loginToken();
    },
    methods: {

        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        questionNow: async function () {
            var that = this
            var params = {
                userId: this.agentId,
                question: this.question
            }
            if (this.question.one.answer && this.question.two.answer && this.question.three.answer && this.question.four.answer && this.question.five.answer && this.question.six.answer && this.question.seven.answer && this.question.eight.answer && this.question.nine.answer && this.question.ten.answer) {
                $.ajax({
                    url: domains + "/f/agent/home/submitQuestion",
                    data: JSON.stringify(params),
                    type: "post",
                    dataType: "json",
                    crossDomain: true,
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    success: function (data) {
                        // console.log(data);
                        if (data.code == 100) {
                            Toast({ message: data.message, duration: 1000 })
                            that.$router.push({ path: "/selectType" });
                        } else {
                            Toast({ message: data.message, duration: 1000 })

                        }
                    },
                    error: function () {
                        console.log("失败");
                    }
                })
            } else {
                Toast({ message: '请把必填数据填写完整，再提交！', duration: 1000 })
            }
        },
    }
}
</script>

<style lang="stylus" scoped>
.question {
    .title {
        background-color: #f0f0f0;
        padding-left: 30px;
        padding-bottom: 15px;

        .bord {
            display: inline-block;
            width: 6px;
            height: 20px;
            background: rgba(194, 223, 90, 1);
        }

        .word {
            font-size: 24px;
            color: rgba(0, 0, 0, 1);
        }
    }

    .list {
        padding: 15px;

        ul.top {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;

            .titl {
                width: 100%;
                display: block;
                font-size: 14px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }

            li {
                width: 80px;
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                position: relative;

                input {
                    display: inline-block;
                    border-radius: 50%;
                    position: absolute;
                    top: 10px;
                    left: 0px;
                }

                .pops {
                    position: absolute;
                    top: -2px;
                    left: 22px;
                }
            }
        }

        ul.tab {
            padding: 10px 0;
            border-bottom: 1px solid #ddd;

            .titl {
                width: 100%;
                display: block;
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }

            li {
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                position: relative;

                input {
                    display: inline-block;
                    border-radius: 50%;
                    position: absolute;
                    top: 10px;
                    left: 0px;
                }

                .pops {
                    position: absolute;
                    top: -2px;
                    left: 22px;
                }
            }

            .txt {
                margin: 15px 0;
                padding: 10px;
                width: 100%;
                background: rgba(240, 240, 240, 1);
            }
        }
    }

    .btn {
        margin: 0 auto;
        margin-bottom: 20px;
        width: 330px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: rgba(194, 223, 90, 1);
        border-radius: 10px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
</style>
